<script setup>
import { ref, watch } from 'vue';
import { useAiSettingStore } from '@/stores/aiSetting';
import {getUserIsBuyService, getUserIsMemberService} from "@/api/type.js";
const store = useAiSettingStore();
const isOpen = ref(false);
const options = ref(['QWen'])

// 根据用户权限动态显示
const displayByBack = async () => {
  const res1 = await getUserIsMemberService();
  const res2 = await getUserIsBuyService();

  // 创建一个临时数组来存储需要添加的选项
  const optionsToAdd = [];

  if(res2.data.package1Owned === true){
    optionsToAdd.push('DeepSeek V3');
  }
  if(res1.data.memberType === 'plum'){
    optionsToAdd.push('DeepSeek V3', 'Kimi');
  }
  if(res2.data.package2Owned === true){
    optionsToAdd.push('Kimi');
  }
  if(res1.data.memberType === 'gold'){
    optionsToAdd.push('DeepSeek V3', 'Kimi', 'DeepSeek R1');
  }
  if(res2.data.package5Owned === true){
    optionsToAdd.push('Qwen-Coder');
  }
  if(res1.data.memberType === 'super'){
    optionsToAdd.push('DeepSeek R1', 'DeepSeek V3', 'Kimi', 'Qwen-Coder');
  }
  if(res2.data.package6Owned === true){
    optionsToAdd.push('Qwen-Coder');
  }

  // 使用 Set 去重并添加到 options 中
  const uniqueOptions = new Set([...options.value, ...optionsToAdd]);
  options.value = Array.from(uniqueOptions);
}

displayByBack();

// 添加模型名称映射
const modelMapping = {
  'QWen': 'qwen',
  'DeepSeek R1': 'deepseek r1',
  'DeepSeek V3': 'deepseek v3',
  'Kimi': 'kimi',
  'Qwen-Coder': 'qwen-coder'
};

// 选中项直接与 store.selectedAI 绑定
const selectedValue = ref(store.selectedAI);

const toggleDropdown = () => {
  isOpen.value = !isOpen.value;
};

const selectOption = (option) => {
  selectedValue.value = option;
  store.setAI(option); // 保存到 pinia

  // 同时保存映射后的模型名称
  store.setModel(modelMapping[option]);

  isOpen.value = false;
};

// 监听 store.selectedAI 变化，保持同步
watch(() => store.selectedAI, (val) => {
  selectedValue.value = val;
});
</script>

<template>
  <div class="custom-selector">
    <div class="display-box" @click="toggleDropdown">
      <div class="display-value">{{ selectedValue }}</div>
      <div class="arrow" :class="{ 'arrow-up': isOpen }">
        <svg width="16" height="16" viewBox="0 0 24 24">
          <path d="M7 10l5 5 5-5z" fill="currentColor" />
        </svg>
      </div>
    </div>
    <div v-show="isOpen" class="dropdown-menu">
      <div v-for="option in options" :key="option" class="dropdown-item" @click="selectOption(option)">
        {{ option }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.custom-selector {
  position: relative;
  width: 150px;
}

.display-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 10px;
  background-color: var(--select-color);
  cursor: pointer;
  transition: border-color 0.3s;
}

.display-box:hover {
  border-color: #c0c4cc;
}

.display-value {
  font-size: 14px;
  color: var(--h4-color);
}

.arrow {
  display: flex;
  align-items: center;
  transition: transform 0.3s;
}

.arrow-up {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 5px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: var(--cart-head);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
}

.dropdown-item {
  padding: 10px 15px;
  font-size: 14px;
  color: var(--h4-color);
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}
</style>
